<template>
  <view class="card-container" :style="{ height: cardHeight }">
    <!-- 标题栏 -->
    <view class="card-title" v-if="showTitle"></view>
    <!-- 内容区域 -->
    <view class="card-content">
      <!-- 用户信息头部 -->
      <view class="user-header">
        <image class="avatar" :src="userInfo.avatar || '/static/image@2x.png'" mode="widthFix"></image>
        <view class="user-info">
          <view class="user-name">
            <span>{{ userInfo.nickname }}</span>
            <image class="role-tag" :src="roleTagSrc" mode="widthFix"></image>
          </view>
          <view class="pay-status" :style="payStatusStyle">
            <image class="status-icon" :src="payStatusIcon" mode="widthFix"></image>
            <span>{{ payStatusText }}</span>
          </view>
        </view>
      </view>

      <!-- 内容列表 (根据角色显示不同内容) -->
      <view class="content-list" v-if="canProceed">
        <!-- 角色信息项 (通用) -->
        <view class="list-item" @click="onAddressClick">
          <span class="item-label">角色信息</span>
          <view class="item-value">
            <template v-if="isUpCard">
              <uni-icons type="right" size="16"></uni-icons>
            </template>
            <template v-else>
              <template v-if="hasGameZone && hasPaidDeposit">
                <uni-icons type="right" size="16"></uni-icons>
              </template>
              <template v-else-if="hasGameZone">
                <span class="btn">修改</span>
              </template>
              <template v-else>
                <span class="btn">去填写</span>
              </template>
            </template>
          </view>
        </view>

        <!-- 收货方特有项 -->
        <template v-if="isReceiver">
          <view class="list-item" @click="onPaymentProofClick">
            <span class="item-label">打款凭证</span>
            <view class="item-value">
              <template v-if="isUpCard">
                <template v-if="otherSideHasProof">
                  <span>已上传</span>
                  <uni-icons type="right" size="16"></uni-icons>
                </template>
                <template v-else>
                  <span class="gray-text">等待对方上传凭证</span>
                </template>
              </template>
              <template v-else>
                <template v-if="!canProceed">
                  <span class="gray-text">等待双方支付押金</span>
                </template>
                <template v-else-if="selfHasFinished">
                  <uni-icons type="right" size="16"></uni-icons>
                </template>
                <template v-else-if="selfHasProof">
                  <span class="btn">修改</span>
                </template>
                <template v-else>
                  <span class="btn">上传</span>
                </template>
              </template>
            </view>
          </view>
        </template>

        <!-- 出货方特有项 -->
        <template v-if="isSender">
          <view class="list-item" @click="onReceiptInfoClick">
            <span class="item-label">收款信息</span>
            <uni-icons type="right" size="16"></uni-icons>
          </view>
          <view class="list-item" @click="onDeliveryProofClick">
            <span class="item-label">交货凭证</span>
            <view class="item-value">
              <template v-if="isUpCard">
                <template v-if="otherSideHasProof">
                  <span>已上传</span>
                  <uni-icons type="right" size="16"></uni-icons>
                </template>
                <template v-else>
                  <span class="gray-text">等待对方上传凭证</span>
                </template>
              </template>
              <template v-else>
                <template v-if="!canProceed">
                  <span class="gray-text">等待双方支付押金</span>
                </template>
                <template v-else-if="selfHasFinished">
                  <uni-icons type="right" size="16"></uni-icons>
                </template>
                <template v-else-if="selfHasProof">
                  <span class="btn">修改</span>
                </template>
                <template v-else>
                  <span class="btn">上传</span>
                </template>
              </template>
            </view>
          </view>
        </template>
      </view>

      <!-- 未支付押金时的空状态 -->
      <view class="empty-state" v-else>
        <image src="/static/trad/kong.png" mode="widthFix"></image>
        <span>等待双方支付押金后 进入交货打款流程</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'InfoCard',
  props: {
    // 用户信息（头像、昵称等）
    userInfo: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 订单信息
    orderinfo: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 用户类型：0-报价方 1-接收方
    userType: {
      type: Number,
      required: true,
      validator: val => [0, 1].includes(val)
    },
    // 卡片位置：up-上方卡片 down-下方卡片
    position: {
      type: String,
      required: true,
      validator: val => ['up', 'down'].includes(val)
    }
  },
  computed: {
    // 卡片高度
    cardHeight() {
      // 特定条件下高度增加
      if (this.userType === (this.isUpCard ? 0 : 1) && this.orderinfo.quotationType === 1) {
        return '440rpx';
      }
      return '340rpx';
    },

    // 是否显示标题栏
    showTitle() {
      return (this.isUpCard && this.orderinfo.quotationType === 1) || 
             (!this.isUpCard && this.orderinfo.quotationType !== 1);
    },

    // 是否为上方卡片
    isUpCard() {
      return this.position === 'up';
    },

    // 角色标签图片路径
    roleTagSrc() {
      const isBuyType = this.orderinfo.quotationType === 1; // 1-收购 2-出售
      // 根据用户类型和订单类型显示不同标签
      if (this.userType === 0) {
        return isBuyType ? '/static/trad/ch.png' : '/static/trad/sh.png';
      } else {
        return isBuyType ? '/static/trad/sh.png' : '/static/trad/ch.png';
      }
    },

    // 支付状态文本
    payStatusText() {
      const isPaid = this.userType === 0 
        ? this.orderinfo.quotationPayStatus === 1 
        : this.orderinfo.userPayStatus === 1;
      return isPaid ? '已支付押金' : '待支付押金';
    },

    // 支付状态图标
    payStatusIcon() {
      return this.payStatusText.includes('已') 
        ? '/static/trad/1.png' 
        : '/static/trad/qb.png';
    },

    // 支付状态样式
    payStatusStyle() {
      return this.payStatusText.includes('已') ? { color: '#54BD6A' } : {};
    },

    // 是否为收货方
    isReceiver() {
      const cond1 = this.userType === 0 && this.orderinfo.quotationType === 2;
      const cond2 = this.userType === 1 && this.orderinfo.quotationType === 1;
      return cond1 || cond2;
    },

    // 是否为出货方
    isSender() {
      return !this.isReceiver;
    },

    // 是否可以进行下一步（双方已支付押金）
    canProceed() {
      return (this.userType === 1 && this.orderinfo.userPayStatus === 1) || 
             (this.userType === 0 && this.orderinfo.quotationPayStatus === 1);
    },

    // 是否有角色信息
    hasGameZone() {
      return this.userType === 0 
        ? !!this.orderinfo.quotationGameZone 
        : !!this.orderinfo.userGameZone;
    },

    // 是否已支付押金
    hasPaidDeposit() {
      return this.userType === 0 
        ? this.orderinfo.quotationPayStatus === 1 
        : this.orderinfo.userPayStatus === 1;
    },

    // 对方是否已上传凭证
    otherSideHasProof() {
      return this.userType === 0 
        ? !!this.orderinfo.userFile 
        : !!this.orderinfo.quotationFile;
    },

    // 自己是否已上传凭证
    selfHasProof() {
      return this.userType === 0 
        ? !!this.orderinfo.quotationFile 
        : !!this.orderinfo.userFile;
    },

    // 自己是否已完成
    selfHasFinished() {
      return this.userType === 0 
        ? this.orderinfo.quotationFinish === 1 
        : this.orderinfo.userFinish === 1;
    }
  },
  methods: {
    // 角色信息点击
    onAddressClick() {
      this.$emit('address', this.position);
    },
    // 收款信息点击
    onReceiptInfoClick() {
      this.$emit('payment', this.position);
    },
    // 打款凭证点击
    onPaymentProofClick() {
      this.$emit('upload', { position: this.position, type: 'img' });
    },
    // 交货凭证点击
    onDeliveryProofClick() {
      this.$emit('upload', { position: this.position, type: 'video' });
    }
  }
};
</script>

<style scoped lang="scss">
.card-container {
  width: 750rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  position: relative;
  margin-bottom: 20rpx;

  .card-title {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(350deg, #FFFFFF 20%, rgba(255, 231, 213, 0.53) 100%);
    border-radius: 20rpx 20rpx 0 0;
    border-top: 2rpx solid #FFFFFF;
  }

  .card-content {
    padding: 28rpx 20rpx;
    box-sizing: border-box;

    .user-header {
      display: flex;
      align-items: center;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }

      .user-info {
        margin-left: 15rpx;
        flex: 1;

        .user-name {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #11192D;

          .role-tag {
            width: 92rpx;
            height: 32rpx;
            margin-left: 10rpx;
          }
        }

        .pay-status {
          display: flex;
          align-items: center;
          margin-top: 10rpx;
          font-size: 28rpx;

          .status-icon {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .content-list {
      margin-top: 30rpx;

      .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        background: #F9F9F9;
        border-radius: 15rpx;
        padding: 0 26rpx;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        color: #11192D;

        .item-label {
          flex: 1;
        }

        .item-value {
          display: flex;
          align-items: center;

          .gray-text {
            color: #979797;
          }

          .btn {
            width: 108rpx;
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
            border-radius: 28rpx;
            font-size: 24rpx;
            color: #FFFFFF;
          }

          uni-icons {
            margin-left: 10rpx;
            color: #AEAEAE;
          }
        }
      }
    }

    .empty-state {
      margin-top: 30rpx;
      text-align: center;
      font-size: 28rpx;
      color: #979797;

      image {
        width: 184rpx;
        height: 124rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>